<template>
	<el-container class="declaration-form">
		<el-header height="40px" class="header">
	    <el-row type="flex" justify="space-between">
	      <span class="title">申报表</span>
	      <div>
	      	<el-button v-show="declarationRecord.xmsbbh && declarationRecord.xmsbbh!=''"
          type="success" size="mini" icon="el-icon-check" @click="onSubmitClick">提交</el-button>
	      	<el-button v-show="declarationRecord.xmsbbh && declarationRecord.xmsbbh!='' "
          type="success" size="mini" icon="el-icon-check" @click="onSaveClick">保存</el-button>
	      	<el-button type="warning" size="mini" icon="el-icon-close" @click="onCloseClick">关闭</el-button>
	      </div>
	    </el-row>
	  </el-header>
	  <el-main class="main">
      <!-- 项目基本信息 -->
      <el-container style="height:100%;" v-if="!declarationRecord.xmsbbh || declarationRecord.xmsbbh=='' ">
        <el-header>
          <h3>项目申报基本信息</h3>
        </el-header>
        <el-main>
          <el-form ref="introductionForm" :model="declarationRecord" :rules="declarationRules"
          label-position="right" label-width="100px" size="mini" status-icon>
            <el-row>
              <el-col :offset="4" :span="16">
                <el-form-item label="项目名称" prop="xmmc">
                  <el-input v-model="declarationRecord.xmmc"></el-input>
                </el-form-item>
                <el-form-item label="项目类型" prop="xmlx">
                  <el-select v-model="declarationRecord.xmlx" placeholder="请选择项目类型">
                    <el-option
                    v-for="item in ['一般项目','重点项目']" :key="item" :label="item" :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="项目主持人" prop="xm">
                      <el-input v-model="teacherRecord.xm" readonly></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="职称" prop="zc">
                      <el-input v-model="teacherRecord.zc" readonly></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="联系电话" prop="sj">
                  <el-input v-model="teacherRecord.sj" readonly></el-input>
                </el-form-item>
                <el-form-item label="项目所在部门" prop="xymc">
                  <el-input v-model="teacherRecord.xymc" readonly></el-input>
                </el-form-item>
                <el-form-item label="项目时间" prop="xmsj">
                  <el-date-picker style="width:100%;"
                    v-model="xmsj"
                    type="daterange"
                    format="yyyy年MM月"
                    value-format="timestamp"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-main>
        <el-footer>
          <el-button @click="onIntroductionConfirm" type="primary" size="mini">申请项目</el-button>
          <el-button @click="onCloseClick" size="mini">取消</el-button>
        </el-footer>
      </el-container>
      <!-- 项目申报内容 -->
      <el-tabs style="height:98%;" v-else v-model="activePage" @tab-click="pageChanged">
        <!-- 基本情况 -->
        <el-tab-pane label="基本情况" name="basic">
          <!-- 项目简况 -->
          <el-form ref="basicForm" :model="declarationRecord" :rules="declarationRules"
          label-position="right" label-width="130px" size="mini" status-icon>
            <el-row>
              <el-col :span="8">
                <el-form-item label="项目名称：" prop="xmmc">
                  <el-input v-model="declarationRecord.xmmc"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8"> 
                <el-form-item label="项目时间：" prop="yjkssj">
                  <el-date-picker style="width:100%;" v-model="xmsj" type="daterange" 
                  format="yyyy年MM月" value-format="timestamp"
                  range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="项目类型：" prop="xmlx">
                  <el-select v-model="declarationRecord.xmlx" placeholder="请选择项目类型">
                    <el-option
                    v-for="item in ['一般项目','重点项目']" :key="item" :label="item" :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="申请学校经费：" prop="sqxxjf">
                    <el-input v-model="declarationRecord.sqxxjf">
                      <template slot="prepend">￥</template>
                    </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="配套学院经费：" prop="ptxyjf">
                  <el-input v-model="declarationRecord.ptxyjf">
                      <template slot="prepend">￥</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="配套其他经费：" prop="ptqtjf">
                  <el-input v-model="declarationRecord.ptqtjf">
                      <template slot="prepend">￥</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <!-- 近三年教学情况 -->
          <simple-panel class="resume-container" :panelTitle="'近三年教学情况'" :hasToolbar="true">
            <template slot="toolbar">
               <el-button type="success" icon="el-icon-plus" size="mini" style="margin:5px 0px;" @click="onResumeAdd('teachingResume')">增加</el-button>
            </template>
            <template slot="main">
              <el-table :data="teachingResumeData" stripe border size="medium" style="width: 100%;height:100%">
                <template v-for="(col, index) in teachingResumeColumns">
                  <el-table-column :key="index" v-if="!col.hidden" :prop="col.prop" :label="col.label" :width="col.width"
                  :align="col.align?col.align:'left'" :header-align="col.headerAlign?col.headerAlign:'left'">
                    <template slot-scope="scope">
                      <span v-if="col.renderer" v-html="col.renderer(scope,col.prop)">
                      </span>
                      <span v-else v-text="scope.row[col.prop]">
                      </span>
                    </template>
                  </el-table-column>
                </template>
                <el-table-column label="操作" width="100" fixed="right">
                  <template slot-scope="scope">
                    <el-button class="edit-btn" type="text" size="small" @click="onResumeEdit(scope.row,'teachingResume', $event)">修改</el-button>
                    <el-button class="delete-btn" type="text" size="small" @click="onResumeDelete(scope.row,'teachingResume', $event)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </simple-panel>
          <!-- 教学改革和科学研究工作简况 -->
          <simple-panel class="resume-container" :panelTitle="'教学改革和科学研究工作简况'" :hasToolbar="true">
            <template slot="toolbar">
               <el-button type="success" icon="el-icon-plus" size="mini" style="margin:5px 0px;" @click="onResumeAdd('researchResume')">增加</el-button>
            </template>
            <template slot="main">
              <el-table :data="researchResumeData" stripe border size="medium" style="width: 100%;height:100%">
                <template v-for="(col, index) in researchResumeColumns">
                  <el-table-column :key="index" v-if="!col.hidden" :prop="col.prop" :label="col.label" :width="col.width"
                  :align="col.align?col.align:'left'" :header-align="col.headerAlign?col.headerAlign:'left'">
                    <template slot-scope="scope">
                      <span v-if="col.renderer" v-html="col.renderer(scope,col.prop)">
                      </span>
                      <span v-else v-text="scope.row[col.prop]">
                      </span>
                    </template>
                  </el-table-column>
                </template>
                <el-table-column label="操作" width="100" fixed="right">
                  <template slot-scope="scope">
                    <el-button class="edit-btn" type="text" size="small" @click="onResumeEdit(scope.row,'researchResume', $event)">修改</el-button>
                    <el-button class="delete-btn" type="text" size="small" @click="onResumeDelete(scope.row,'researchResume', $event)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </simple-panel>
          <!-- 项目成员 -->
          <simple-panel :panelTitle="'项目组主要成员（不超过5人，不含主持人）'">
            <template slot="main">
              <dynamic-table :tableData="memberData" :columns="memberColumns" :islalCheck="true" buttonPosition="bottomLeft"
              addBtnText="添加成员" delBtnText="删除成员" :showInsBtn="false" delBtnClsType="danger" 
              @inner-select="selectTeacher" @delete-row="deleteTeacher">
              </dynamic-table> 
            </template>
          </simple-panel>
        </el-tab-pane> 
        <!-- 背景及意义，研究基础，实施方案 -->
        <template v-for="(nrlx, index) in nrlxData">
          <el-tab-pane :key="index" :label="nrlx.nrlxmc" :name="nrlx.nrlxbh">
            <el-form :ref="nrlx.nrlxbh+'Form'" :model="declarationRecord" :rules="nrRules"
            label-position="top" size="mini" status-icon>
              <template v-for="(nr, idx) in nrData">
                <el-form-item :key="idx" v-if="nr.nrlxbh == nrlx.nrlxbh" :label="nr.xh+'.'+nr.bt" prop="nr">
                  <el-input type="textarea" v-model="nrData[idx].nr" :autosize="{minRows: 3, maxRows: 1000}"></el-input>
                </el-form-item>
              </template>
            </el-form>
          </el-tab-pane>
        </template>
        <!-- 经费预算 -->
        <el-tab-pane label="经费预算" name="budget">
          <simple-panel :panelTitle="'经费来源'">
            <template slot="main">
              <el-form class="budget-form" ref="budgetForm" :model="declarationRecord" :rules="declarationRules"
              label-position="right" label-width="100px" size="mini" status-icon>
                <el-row>
                  <el-col :md="12" :lg="6">
                    <el-form-item label="学校资助：" prop="sqxxjf">
                        <el-input v-model="declarationRecord.sqxxjf">
                          <template slot="prepend">￥</template>
                        </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :md="12" :lg="6">
                    <el-form-item label="院系配套：" prop="ptxyjf">
                      <el-input v-model="declarationRecord.ptxyjf">
                          <template slot="prepend">￥</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :md="12" :lg="6">
                    <el-form-item label="自筹：" prop="zcjf">
                      <el-input v-model="declarationRecord.zcjf">
                          <template slot="prepend">￥</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :md="12" :lg="6">
                    <el-form-item label="其他：" prop="ptqtjf">
                      <el-input v-model="declarationRecord.ptqtjf">
                          <template slot="prepend">￥</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <h3>合计：￥{{jfhj}}</h3>
                </el-row>
              </el-form>
            </template>
          </simple-panel>
          <simple-panel :panelTitle="'经费支出预算'" :hasToolbar="true">
            <template slot="toolbar">
               <el-button type="success" icon="el-icon-plus" size="mini" style="margin:5px 0px;" @click="onBudgetAdd('budget')">增加</el-button>
            </template>
            <template slot="main">
              <el-table :data="budgetData" stripe border size="medium" style="width: 100%;height:100%">
                <template v-for="(col, index) in budgetColumns">
                  <el-table-column :key="index" v-if="!col.hidden" :prop="col.prop" :label="col.label" :width="col.width"
                  :align="col.align?col.align:'left'" :header-align="col.headerAlign?col.headerAlign:'left'">
                    <template slot-scope="scope">
                      <span v-if="col.renderer" v-html="col.renderer(scope,col.prop)">
                      </span>
                      <span v-else v-text="scope.row[col.prop]">
                      </span>
                    </template>
                  </el-table-column>
                </template>
                <el-table-column label="操作" width="100" fixed="right">
                  <template slot-scope="scope">
                    <el-button class="edit-btn" type="text" size="small" @click="onBudgetEdit(scope.row,'budget', $event)">修改</el-button>
                    <el-button class="delete-btn" type="text" size="small" @click="onBudgetDelete(scope.row,'budget', $event)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template> 
          </simple-panel>
        </el-tab-pane>
        <!-- 推荐评审意见 -->
        <el-tab-pane label="推荐评审意见" name="recommendation">
          <el-form ref="recommendationForm" :model="declarationRecord" :rules="declarationRules"
            label-position="top" size="mini" status-icon>
              <el-form-item label="项目所在单位意见：" prop="xmszdwyj">
                <el-input type="textarea" v-model="declarationRecord.xmszdwyj" :autosize="{minRows: 3, maxRows: 1000}"></el-input>
              </el-form-item>
              <el-form-item label="项目所在单位推荐日期：" prop="xmszdwtjrq">
                <el-date-picker style="width:100%;" v-model="declarationRecord.xmszdwtjrq" type="date" value-format="timestamp" placeholder="请选择">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="专家评审意见：" prop="zjpsyj">
                <el-input type="textarea" v-model="declarationRecord.zjpsyj" :autosize="{minRows: 3, maxRows: 1000}"></el-input>
              </el-form-item>
              <el-form-item label="专家评审日期：" prop="zjpsrq">
                <el-date-picker style="width:100%;" v-model="declarationRecord.zjpsrq" type="date" value-format="timestamp" placeholder="请选择">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="学校审批意见：" prop="xxspyj">
                <el-input type="textarea" v-model="declarationRecord.xxspyj" :autosize="{minRows: 3, maxRows: 1000}"></el-input>
              </el-form-item>
              <el-form-item label="学校审批日期：" prop="xxsprq">
                <el-date-picker style="width:100%;" v-model="declarationRecord.xxsprq" type="date" value-format="timestamp" placeholder="请选择">
                </el-date-picker>
              </el-form-item>
            </el-form>
        </el-tab-pane>
      </el-tabs>
	  </el-main>
    <!-- 教学简历dlg -->
    <el-dialog title="教学工作简历信息" width="30%" :visible.sync="teachingResumeDlgVisible">
      <el-form ref="teachingResumeForm" :model="teachingResumeRecord" :rules="teachingResumeRules"
      label-position="right" label-width="90px" size="mini" status-icon v-loading="teachingResumeLoading">
        <el-form-item label="开始时间" prop="jxgzkssj">
          <el-date-picker style="width:100%;" v-model="teachingResumeRecord.jxgzkssj"
            type="date" value-format="timestamp" format="yyyy年MM月" placeholder="选择月">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="jxgzjssj">
          <el-date-picker style="width:100%;" v-model="teachingResumeRecord.jxgzjssj"
            type="date" value-format="timestamp" format="yyyy年MM月" placeholder="选择月">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="课程名称" prop="kcmc">
          <el-input v-model="teachingResumeRecord.kcmc"></el-input>
        </el-form-item> 
        <el-form-item label="授课对象" prop="skdx">
          <el-input v-model="teachingResumeRecord.skdx"></el-input>
        </el-form-item>
        <el-form-item label="授课学时" prop="skxs">
          <el-input-number style="width:100%;" v-model="teachingResumeRecord.skxs" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="授课学院" prop="xybh">
        <el-select v-model="teachingResumeRecord.xybh" placeholder="请选择学院">
            <template v-for="item in facultyData">
              <el-option
                :key="item.xybh"
                :label="item.xymc"
                :value="item.xybh">
                <span style="float: left">{{ item.xymc }}</span>
                <span style="float: right; font-size: 13px; margin-left:5px;">{{ item.xybhzdy }}</span>
              </el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-row>
          <el-button @click="onResumeConfirm('teachingResume')" type="primary" size="mini">确定</el-button>
          <el-button @click="teachingResumeDlgVisible=false" size="mini">取消</el-button>
        </el-row>
      </el-form>
    </el-dialog> 
    <!-- 科研简历dlg -->
    <el-dialog title="科研工作信息" width="30%" :visible.sync="researchResumeDlgVisible">
      <el-form ref="researchResumeForm" :model="researchResumeRecord" :rules="researchResumeRules"
      label-position="right" label-width="90px" size="mini" status-icon v-loading="researchResumeLoading">
        <el-form-item label="立项时间" prop="lxsj">
          <el-date-picker style="width:100%;" v-model="researchResumeRecord.lxsj"
            type="month" value-format="timestamp" placeholder="选择月">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="项目名称" prop="xmmc">
          <el-input v-model="researchResumeRecord.xmmc"></el-input>
        </el-form-item>
        <el-form-item label="概况" prop="gk">
        <el-select v-model="researchResumeRecord.gk" placeholder="请选择">
            <template v-for="item in ['在研','结题','获奖']">
              <el-option :key="item" :label="item" :value="item"> </el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-row>
          <el-button @click="onResumeConfirm('researchResume')" type="primary" size="mini">确定</el-button>
          <el-button @click="researchResumeDlgVisible=false" size="mini">取消</el-button>
        </el-row>
      </el-form>
    </el-dialog> 
    <!-- 经费预算dlg -->
    <el-dialog title="经费预算明细" width="30%" :visible.sync="budgetDlgVisible">
      <el-form ref="budgetResumeForm" :model="budgetRecord" :rules="budgetRules"
      label-position="right" label-width="130px" size="mini" status-icon v-loading="budgetLoading">
        <el-form-item label="经费支出科目：" prop="jfzckm">
          <el-input v-model="budgetRecord.jfzckm"></el-input>
        </el-form-item>
        <el-form-item label="用途说明：" prop="ytsm">
          <el-input v-model="budgetRecord.ytsm"></el-input>
        </el-form-item>
        <el-form-item label="金额（元）：" prop="je">
          <!-- <el-input v-model="budgetRecord.je"></el-input> -->
          <el-input-number style="width:100%;" v-model="budgetRecord.je" :min="0" label="输入金额"></el-input-number>
        </el-form-item>
        <el-row>
          <el-button @click="onBudgetConfirm('budget')" type="primary" size="mini">确定</el-button>
          <el-button @click="budgetDlgVisible=false" size="mini">取消</el-button>
        </el-row>
      </el-form>
    </el-dialog> 

	</el-container>
</template>

<script>
import SimplePanel from "@/components/basic/SimplePanel";
import TablePanel from "@/components/basic/TablePanel";
import DynamicTable from "@/components/basic/DynamicTable";
import {
  formModelInitFromTable,
  formRulesInitFromTable
} from "@/utils/formutils.js";
import { trueFalseRenderer,b, dateRenderer } from "@/utils/tableutils.js";

//meta info
var teaching = "teachingResume"; // 表格名称
var research = "researchResume"; // 表格名称
var budget   = "budget";

var columnsAttr = "Columns"; // 列
var dataAttr = "Data"; // 数据
var selectionAttr = "Selection"; // 选中
var dlgVisibleAttr = "DlgVisible"; // 对话框
var formAttr = "Form";
var recordAttr = "Record"; // 表单模型
var rulesAttr = "Rules"; // 表单验证
var loadAttr = "Loading";

//教学简历
var teachingResumeColumns = [
  {
    prop:"sbjxglbh",
    label:"申报教学关联编号",
    hidden: true
  },
  {
    prop: "jsbh",
    label: "教师编号",
    hidden: true
  },
  {
    prop: "gh",
    label: "工号",
    hidden: true
  },
  {
    prop: "jxgzjlbh",
    label: "教学工作简历编号",
    hidden: true
  },
  {
    prop: "jxgzkssj",
    label: "开始时间",
    type: "date",
    renderer:dateRenderer,
    rules: [
      {
        required: true,
        message: "必填",
        trigger: "blur"
      }
    ]
  },
  {
    prop: "jxgzjssj",
    label: "结束时间",
    type: "date",
    renderer:dateRenderer,
    rules: [
      {
        required: true,
        message: "必填",
        trigger: "blur"
      }
    ]
  },
  {
    prop: "kcmc",
    label: "课程名称",
    rules: [
      {
        required: true,
        message: "必填",
        trigger: "blur"
      }
    ]
  },
  {
    prop: "skdx",
    label: "授课对象",
    rules: [
      {
        required: true,
        message: "必填",
        trigger: "blur"
      }
    ]
  },
  {
    prop: "skxs",
    label: "授课学时",
    rules: [
      {
        type: "integer",
        required: true,
        message: "请填写数字",
        trigger: "blur"
      }
    ]
  },
  {
    prop: "xybh",
    label: "授课学院编号",
    hidden: true
  },
  {
    prop: "xymc",
    label: "授课学院",
    hidden: true
  }
];

//科研简历
var researchResumeColumns = [
  {
    prop:"sbkyglbh",
    label:"申报科研关联编号",
    hidden: true
  },
  {
    prop: "jgkygzjkbh",
    label: "教改科研工作简况编号",
    hidden: true
  },
  {
    prop:"jsbh",
    label:"教师编号",
    hidden: true
  },
  {
    prop: "lxsj",
    label: "立项时间",
    type: "date",
    renderer:dateRenderer,
    rules: [
      {
        required: true,
        message: "必填",
        trigger: "blur"
      }
    ]
  },
  {
    prop: "xmmc",
    label: "项目名称",
    rules: [
      {
        required: true,
        message: "必填",
        trigger: "blur"
      }
    ]
  },
  {
    prop: "gk",
    label: "概况",
    type: "select"
  }
];

// 成员
var memberColumns = [
  {
    prop:"xmsbbh",
    label:"项目申报编号",
    hidden:true
  },
  {
    prop: "xmzcybh",
    label: "项目组成员编号",
    hidden: true
  },
  {
    prop: "cyxh",
    label: "成员序号",// TODO 需要处理自增
    width:60,
    type:"myIndex"
  },
  {
    prop: "jsbh",
    label: "教师",
    type:"select",
    valueKey:"jsbh",
    labelKey:"xm",
    filterable:true,
    options:[],
    aboutColumns:{
      "gh":"gh",
      "csrq":"csrq",
      "zw":"zw",
      "xmc":"xmc",
      "xymc":"xymc"
    }
  }, 
  {
    prop: "gh",
    label: "工号"
  },
  {
    prop: "csrq",
    label: "出生日期",
    type:'date',
    readonly:true
  },
  {
    prop: "zw",
    label: "专业技术职务"
  }, 
  {
    prop: "xmc",
    label: "系名称"
  }, 
  {
    prop: "xymc",
    label: "学院名称"
  },
  {
    prop: "xmfg",
    label: "项目分工",
    type:"textarea",
    rules: [
      {
        required: true,
        message: "必填",
        trigger: "blur"
      }
    ]
  }
];

//项目申报内容
var nrColumns = [
  {
    prop:"xmsbbh",
    label:"项目申报编号"
  },
  {
    prop:"nrlxbh",
    label:"内容类型编号"
  },
  {
    prop:"nrbh",
    label:"内容编号"
  },
  {
    prop:"xh",
    label:"序号"
  },
  {
    prop:"bt",
    label:"标题"
  },
  {
    prop:"nr",
    label:"内容"
  }
];

// 预算支出明细
var budgetColumns =[
  {
    prop:"xmsbbh",
    label:"项目申报编号",
    hidden:true
  },
  {
    prop:"jfysmxbh",
    label:"经费预算明细编号",
    hidden:true
  },
  {
    prop:"xh",
    label:"序号",
    width:60
  },
  {
    prop:"jfzckm",
    label:"经费支出科目",
    width:200,
    rules:[{
      required:true,
      max:20,
      trigger:"blur",
      message:"必填，不超过20个字"
    }]
  },
  {
    prop:"ytsm",
    label:"用途说明",
    rules:[{
      required:true,
      max:50,
      trigger:"blur",
      message:"必填，不超过50个字"
    }]
  },
  {
    prop:"je",
    label:"金额",
    width:200,
    type:"number",
    default:0,
    rules:[{
      required:true,
      min:0,
      type:"number",
      trigger:"blur"
    }]
  }
];

export default {
  name: "DecForm",
  props: {
    formRecord: {
      type: Object
    },
    formRules: {
      type: Object
    }
  },
  components: {
    "simple-panel": SimplePanel,
    "table-panel": TablePanel,
    "dynamic-table":DynamicTable
  },
  computed: {
    sqjf:function(){// 申请经费-不带自筹
      var me = this;
      var sqxxjf = parseFloat(me.declarationRecord.sqxxjf);
      var ptxyjf = parseFloat(me.declarationRecord.ptxyjf);
      var ptqtjf = parseFloat(me.declarationRecord.ptqtjf);

      return sqxxjf+ptxyjf+ptqtjf;

      return 0;
    },
    jfhj:function(){//经费合计
      var me = this;
      var sqxxjf = parseFloat(me.declarationRecord.sqxxjf);
      var ptxyjf = parseFloat(me.declarationRecord.ptxyjf);
      var zcjf   = parseFloat(me.declarationRecord.zcjf);
      var ptqtjf = parseFloat(me.declarationRecord.ptqtjf);

      return sqxxjf+ptxyjf+zcjf+ptqtjf;
    }, 
    xmsj: {// 项目时间-研究开始时间，研究结束时间
      get: function () {
        return [this.declarationRecord.yjkssj,this.declarationRecord.yjjssj];
      },
      set: function (v) {
        this.declarationRecord.yjkssj = v[0]
        this.declarationRecord.yjjssj = v[1]
      }
    }
  }, 
  methods: {
    onSubmitClick:function(){
      let me = this;

    },
    onSaveClick: function() {// 保存表单
      let me = this;
      // 验证信息
      let ret;
      me.$refs.basicForm.validate((result, what)=>{
        ret = result;
      });
      if(!ret){
        me.$message.error("基本信息填写有误！");
        return;
      }
      me.$refs.budgetForm.validate((result, what)=>{
        ret = result;
      });
      if(!ret){
        me.$message.error("预算填写有误！");
        return;
      }
      // 发送请求 /static/data/testSuc.json
      me.postRequest("/jgxmsbSbjcxx", me.declarationRecord).then((resp)=>{
        if (resp.status == 200) {
          me.$message.success("提交成功！");
          //最后，关闭面板
          me.onCloseClick();
        } else {
          me.$message.error( "服务器发生错误，代码：" + resp.status);
        }
      });
    },
    onCloseClick:function() {// 关闭页面
      this.declarationRecord={};
      this.declarationRules={};
      this.teacherRecord={};
      this[teaching + dataAttr] = [];
      this[research + dataAttr]=[];
      this.memberData=[];
      this.nrData=[];
      this.budgetData=[];

      this.$emit("form-close");
    },
    onIntroductionConfirm: function() {// 基本情况-确定
      var me = this;
      // 验证信息
      var ret;
      me.$refs.introductionForm.validate((result, what)=>{
        ret = result;
      });
      if(!ret){
        me.$message.error("表单信息有误");
        return;
      }
      // 发送请求 提交并生成主表记录，和其他子表的必要记录 /static/data/declaration.json
      me.postRequest("/jgxmsbSbjcxx", me.declarationRecord
      ).then((resp)=>{
        if (resp.status == 200) {
          me.$message.success("创建项目成功！");
          me.declarationRecord = resp.data; // 更新保存后的数据

          // 先把外键都放进去
          me.nrData = me.arrUtil.insertKeyInfoArr(me.nrData, "xmsbbh", me.declarationRecord.xmsbbh);
          // 保存内容的空数据
          // console.log("挨个保存内容的固定数据", me.nrData);
          me.postRequest("/jgxmsbNr", me.nrData).then((resp)=>{
            if(resp.status == 200){
              me.innerInit();// 具有了主键，重新初始化记录
            }
          });
         
        } else {
          me.$message.error("服务器发生错误，代码：" + resp.status);
        }
      });
    },
    pageChanged: function(tab, event) {//切换tab
    }, 
    onResumeAdd: function(tname) {// 教学简历/科研简历-新增
      var me = this;
      me[tname + recordAttr] = formModelInitFromTable(
        me[tname + columnsAttr]
      );
      me[tname + recordAttr].sfqy = "1"; // 创建时，有效否是选中的
      me[tname + recordAttr].jsbh = me.declarationRecord.jsbh;// 默认字段，教师编号
      me[tname + dlgVisibleAttr] = true;
    },
    onResumeEdit: function(row, tname) {// 教学简历/科研简历-编辑
      var me = this;
      me[tname + recordAttr] = row;
      me[tname + dlgVisibleAttr] = true;
    },
    onResumeDelete: function(row, tname) {// 教学简历/科研简历-删除
      let me = this;
      let key = "";
      let url = "";
      let glUrl = "";
      if(tname == teaching){
        key="jxgzjlbh";
        url="jcJxgzjl";
        glUrl="jgxmsbSbjxgl";
      }else if(tname == research){
        key= "kygzjlbh";
        url="jcJgkygzjk";
        glUrl="";
      }

      // 先删除关联，再删除记录
      if(key != ""){
        me.$confirm("确定删除这条记录吗?", "提示", {
          type: "warning"
        }).then(() => {
            me.deleteRequest(`/${url}/${row[key]}`).then((resp)=>{
              if(resp.status == 200) {
                me.$message.success("删除成功!");
              }else{
                me.$message.error('删除失败！');
              }
            });
        }).catch(() => {});
      }
      
    },
    onResumeConfirm: function(tname) {// 教学简历/科研简历-确认
      var me = this;
      let record = {};
      let jxjlurl = "";// 教学工作简历url
      let glUrl = "";// 关联url
      let primaryKey = "";
      if(tname == teaching){
        jxjlurl="jcJxgzjl";
        glUrl="jgxmsbSbjxgl";
        primaryKey = "jxgzjlbh";
      }else if(tname == research){
        jxjlurl="jcJgkygzjk";
        glUrl="jgxmsbSbkygl";
        primaryKey = "jgkygzjkbh";
      }

      me.$refs[tname + formAttr].validate(valid => {
        if (valid) {
          //  /static/data/testSuc.json
          me[tname+loadAttr] = true;
          me.postRequest("/"+jxjlurl, me[tname+recordAttr]
          ).then(resp => {// 保存简历
            if (resp.status == 200) {
              me.$message.success("添加成功！");
              // 这里会重新返回一个带有编号的记录，把记录放进表格后面
              me[tname + dataAttr].push(me[tname + recordAttr]);
              me.postRequest("/" + glUrl, {
                xmsbbh:me.declarationRecord.xmsbbh,
                [primaryKey+"s"]:me.arrUtil.transObjArrToSimpleArr(me[tname + dataAttr], primaryKey).toString()
              }).then(resp=>{// 保存关联
                console.log("关联保存");
                me[tname+loadAttr]  = false;
                me[tname + dlgVisibleAttr] = false;
                me.getRequest("/"+jxjlurl,{
                  xmsbbh:me.declarationRecord.xmsbbh
                }).then(resp=>{
                  if(resp.status == 200){
                    me[tname+dataAttr] = resp.data;
                  }
                })
              });
            } else {
              me[tname+loadAttr]  = false;
              me.$message.error("服务器出错，保存失败！");
            }
          })
        } else {
          me.$message.error("表单信息有误！");
        }
      });
    }, 
    selectTeacher:function(value, valueKey, selected, aboutColumns, options, index){// 成员-创建
      let me = this;
      if(me.declarationRecord.xmsbbh){
        me.memberData[index].xmsbbh = me.declarationRecord.xmsbbh;
        console.log("添加了编号", me.memberData);
        me.postRequest("/jgxmsbXmzcy", me.memberData[index]).then(resp=>{
          if(resp.status == 200){
            me.memberData[index] = resp.data;
          }
        });
      }else{
        console.log("项目申报编号不存在！");
      }
    },
    deleteTeacher:function(records){// 成员-删除
      let me = this;
      if(me.declarationRecord.xmsbbh){
        records.forEach((record)=>{
          me.deleteRequest(`/jgxmsbXmzcy/${record.xmzcybh}`).then((resp)=>{
            if(resp.status == 200){
              me.$message.success("删除成功！");
            }
          });
        })
        
      }else{
        console.log("项目申报编号不存在！");
      }
    },
    onBudgetAdd:function(tname){// 预算-创建
      var me = this;
      me[tname + recordAttr] = formModelInitFromTable(
        me[tname + columnsAttr]
      );
      me[tname + recordAttr].sfqy = "1"; // 创建时，有效否是选中的
      me[tname + recordAttr].xmsbbh = me.declarationRecord.xmsbbh;// 默认字段，教师编号

      
      console.log(me.declarationRecord);
      console.log(me[tname + recordAttr]);
      me[tname + dlgVisibleAttr] = true;
    },
    onBudgetEdit:function(tname){// 预算-编辑
      var me = this;
      me[tname + recordAttr] = row;
      me[tname + dlgVisibleAttr] = true;
    },
    onBudgetDelete:function(tname){// 预算-删除
      let me = this;
      let key = "";
      let url = "";
      let glUrl = "";
      if(tname == budget){
        key="jfysmxbh";
        url="jgxmsbJfysmx";
      }

      // 删除记录
      if(key != ""){
        me.$confirm("确定删除这条记录吗?", "提示", {
          type: "warning"
        }).then(() => {
            me.deleteRequest(`/${url}/${row[key]}`).then((resp)=>{
              if(resp.status == 200) {
                me.$message.success("删除成功!");
              }else{
                me.$message.error('删除失败！');
              }
            });
        }).catch(() => {});
      }
    },
    onBudgetConfirm:function(tname){// 预算-确认
      var me = this;
      let record = {};
      let url = "";// 关联url
      let primaryKey = "";
      if(tname == budget){
        url="jgxmsbJfysmx";
        primaryKey = "jfysmxbh";
      } 
      me.$refs[tname + formAttr].validate(valid => {
        if (valid) {
          //  /static/data/testSuc.json
          me[tname+loadAttr] = true;
          me.postRequest("/"+url, me[tname+recordAttr]
          ).then(resp => {// 保存明细
            if (resp.status == 200) {
              me.$message.success("添加成功！");
              me[tname+loadAttr]  = false;
              me[tname + dlgVisibleAttr] = false;
              // 这里会重新返回一个带有编号的记录，把记录放进表格后面
              me[tname + dataAttr].push(me[tname + recordAttr]);
            } else {
              me[tname+loadAttr]  = false;
              me.$message.error("服务器出错，保存失败！");
            }
          })
        } else {
          me.$message.error("表单信息有误！");
        }
      });
    },
    generateDeclarationContents(){//生成一个内容列表
      var me = this;

      // /static/data/teachingreform/nrlx.json
      me.getRequest("/jgxmsbNrlx",{
      }).then(resp=>{
        if(resp.status == 200){
          me.nrlxData = resp.data;  
        }else{
          me.$message.error( "请求教师数据出错");
        }
      }).then(()=>{
        // 按照内容类型给出一组规定的数据---目前这是写死在这里，没有放在数据库
        me.nrlxData.forEach((item, index)=>{
          if(item.nrlxmc == "立项背景及意义"){
            me.nrData.push({
              nrlxbh:item.nrlxbh,
              xh:1,
              bt:"国内外相关研究现状分析（简评国内外对此问题的研究进展情况）",
              nr:""
            });
            me.nrData.push({
              nrlxbh:item.nrlxbh,
              xh:2,
              bt:"本项目对促进教学工作，提高教学质量的作用和意义",
              nr:""
            });
          }else if(item.nrlxmc == "项目研究基础"){
            me.nrData.push({
              nrlxbh:item.nrlxbh,
              xh:1,
              bt:"项目组成员已开展的相关研究及成果概述（包括校级以上项目、学术论著、论文及获奖等）",
              nr:""
            });
            me.nrData.push({
              nrlxbh:item.nrlxbh,
              xh:2,
              bt:"已具备的教学改革与研究的基础和环境，学院对项目的支持情况（含有关政策、经费支持及其管理机制、保障条件等），尚缺少的条件和拟解决的途径",
              nr:""
            });
          }else if(item.nrlxmc == "项目实施方案"){
            me.nrData.push({
              nrlxbh:item.nrlxbh,
              xh:1,
              bt:"具体研究内容或对象",
              nr:""
            });
            me.nrData.push({
              nrlxbh:item.nrlxbh,
              xh:2,
              bt:"研究拟达到的目标",
              nr:""
            });
            me.nrData.push({
              nrlxbh:item.nrlxbh,
              xh:3,
              bt:"拟解决的关键问题",
              nr:""
            });
            me.nrData.push({
              nrlxbh:item.nrlxbh,
              xh:4,
              bt:"项目的预期效益（包括实施范围与受益范围等）",
              nr:""
            });
            me.nrData.push({
              nrlxbh:item.nrlxbh,
              xh:5,
              bt:"本项目的特色、创新及推广应用价值",
              nr:"（1）特色\n\n（2）创新点\n\n（3）应用价值及推广途径"
            });
            me.nrData.push({
              nrlxbh:item.nrlxbh,
              xh:6,
              bt:"本项目的主要研究方法",
              nr:""
            });
            me.nrData.push({
              nrlxbh:item.nrlxbh,
              xh:7,
              bt:"实施计划（含年度进展情况）",
              nr:""
            });
            me.nrData.push({
              nrlxbh:item.nrlxbh,
              xh:8,
              bt:"项目预期成果形式（研究报告、实验报告、调研报告、教改方案、教学文本、编写讲义、出版专著或教材、制作课件、教学软件、专利、发表论文、竞赛获奖、成果鉴定和成果应用证明等，可以同时有多种成果形式。研究报告为必备成果。）",
              nr:""
            });
            me.nrData.push({
              nrlxbh:item.nrlxbh,
              xh:9,
              bt:"参考文献",
              nr:""
            });
          }
        });
      });
    },
    findTeachingResumeInfo:function(){// 寻找教学简历数据
      let me = this;
      let jxjlUrl = "jcJxgzjl";// 教学工作简历url
      let glUrl ="jgxmsbSbjxgl";// 关联url
      // 如果编号存在，那么就需要 教学简历-自动查上来
      if(me.declarationRecord.xmsbbh){
        console.log("看一下是否存在已关联教学简历");
        me.getRequest("/"+glUrl, {
          xmsbbh:me.declarationRecord.xmsbbh
        }).then(resp=>{
          if(resp.status == 200 && resp.data.length > 0){
            // 查询到已关联信息
            console.log("存在已关联教学简历", resp.data);
            me[teaching + dataAttr] = resp.data;
          }else{
            let fromDate = new Date(); fromDate.setFullYear(new Date().getFullYear()-3);
            // 查询近三年的教学简历
            console.log("查询近三年教学记录");
            me.getRequest("/"+jxjlUrl,{
              jsbh:me.declarationRecord.jsbh,
              jxgzjssj:JSON.stringify([Number(fromDate),Number(new Date())]) 
            }).then(resp=>{
              if(resp.status == 200){
                // 保存关联
                me.postRequest("/"+glUrl,{
                  xmsbbh:me.declarationRecord.xmsbbh,
                  jxgzjlbhs:me.arrUtil.transObjArrToSimpleArr(resp.data,"jxgzjlbh").toString()
                }).then(resp=>{
                  console.log("关联已保存");
                  me.getRequest("/"+glUrl,{
                    xmsbbh:me.declarationRecord.xmsbbh
                  }).then(resp=>{
                    console.log("再次查询，看看有没有保存好了",resp.data);
                    if(resp.status == 200){
                      me[teaching+dataAttr] = resp.data;
                    }
                  })
                });
              }else{
                me.$message.error("请求教学简历出错");
              }
            });
          }
        });
      } 
    },
    findResearchResumeInfo:function(){// 寻找科研简历数据
      let me = this;
      let jlUrl = "jcJgkygzjk";// 简历url
      let glUrl ="jgxmsbSbkygl";// 关联url
      // 如果编号存在，那么就需要 教学简历-自动查上来
      if(me.declarationRecord.xmsbbh){
        console.log("看一下是否存在已关联科研简历");
        me.getRequest("/"+glUrl, {
          xmsbbh:me.declarationRecord.xmsbbh
        }).then(resp=>{
          if(resp.status == 200 && resp.data.length > 0){
            // 查询到已关联信息
            console.log("存在已关联科研简历",resp.data);
            me[research + dataAttr] = resp.data;
          }else{
            // 查询科研简历
            me.getRequest("/"+jlUrl,{
              jsbh:me.declarationRecord.jsbh
            }).then(resp=>{
              if(resp.status == 200){
                // 保存关联
                console.log("查询到已存在的科研简历",resp.data);
                me.postRequest("/"+glUrl,{
                  xmsbbh:me.declarationRecord.xmsbbh,
                  jgkygzjkbhs:me.arrUtil.transObjArrToSimpleArr(resp.data,"jgkygzjkbh").toString()
                }).then(resp=>{
                  console.log("科研-关联已保存");
                  me.getRequest("/"+glUrl,{
                    xmsbbh:me.declarationRecord.xmsbbh
                  }).then(resp=>{
                    console.log("科研-再次查询，看看有没有保存好了",resp.data);
                    if(resp.status == 200){
                      me[research+dataAttr] = resp.data;
                    }
                  })
                });
              }else{
                me.$message.error("请求科研简历出错");
              }
            });
          }
        });
      } 
    },
    findXmzcyInfo:function(){// 寻找人员信息
      let me = this;
      let ryUrl = "";// 人员url
      let glUrl ="jgxmsbXmzcy";// 关联url
      // 如果存在人员，则加载人员
      if(me.declarationRecord.xmsbbh){
        console.log("查找人员");
        me.getRequest("/"+glUrl, {
          xmsbbh:me.declarationRecord.xmsbbh
        }).then(resp=>{
          if(resp.status == 200 && resp.data.length > 0){
            // 查询到已关联信息
            console.log("存在已关联教学简历",resp.data);
            me.memberData = resp.data;
          }
        });
      } 
    },
    findNr:function(){// 寻找内容列表
      let me = this;
      // 内容是预先规定好的-如果有，就查上来填进去
      if(me.declarationRecord.xmsbbh){
        me.getRequest("/jgxmsbNr",{
          xmsbbh:me.declarationRecord.xmsbbh
        }).then(resp=>{
          if(resp.status == 200){
            console.log("查找到的内容是=",resp.data);
            me.nrData = resp.data;
          }else{
            me.$message.error("请求教师数据出错");
          }
        });
      }else{
        me.generateDeclarationContents();// 生成一组新的数据
      }
    },
    findJf:function(){// 寻找经费子表信息
      let me = this;
      let glUrl ="jgxmsbJfysmx";// 关联url
      // 如果存在人员，则加载人员
      if(me.declarationRecord.xmsbbh){
        console.log("查找经费");
        me.getRequest("/"+glUrl, {
          xmsbbh:me.declarationRecord.xmsbbh
        }).then(resp=>{
          if(resp.status == 200 && resp.data.length > 0){
            // 查询到已关联信息
            console.log("存在经费明细",resp.data);
            me.budgetData = resp.data;
          }
        });
      } 
    },
    init(){// 初始化函数-需要执行多次-对外
      let me =this;
      console.log("编辑", me.formRecord);
      me.declarationRules = me.formRules;// 冒泡进来
      me.declarationRecord = me.formRecord;// 冒泡进来
      // 表单模型初始化
      me[teaching + recordAttr] = formModelInitFromTable(me[teaching + columnsAttr]);
      // 表单验证初始化
      me[teaching + rulesAttr] = formRulesInitFromTable( me[teaching + columnsAttr]);
      // 表单模型初始化
      me[research + recordAttr] = formModelInitFromTable(me[research + columnsAttr]);
      // 表单验证初始化
      me[research + rulesAttr] = formRulesInitFromTable(me[research + columnsAttr]);
      //
      me[budget+ recordAttr] = formModelInitFromTable(me[budget + columnsAttr]);
      //
      me[budget + rulesAttr] = formRulesInitFromTable(me[budget + columnsAttr]);

      me.innerInit();
    },
    innerInit(){// 初始化函数-需要执行多次-对内
      let me =this;
      // 填写-教师信息
      if(me.$store.state.user.sslx == '教师'){
        me.getRequest("/jcJsxxb", {
          jsbh:me.$store.state.user.sslxbh
        }).then(resp => {
          if(resp.status == 200) {
            if(resp.data.results.length == 1){
              me.teacherRecord = resp.data.results[0];
              me.declarationRecord.jsbh = me.teacherRecord.jsbh;// 连接外键
              me.declarationRecord.xybh = me.teacherRecord.xybh;// 连接外键

            }else{
              me.$message.error("未查询到个人信息，请联系管理员解决！");
            }
          }
        });
      }

      me.findTeachingResumeInfo();// 查教学简历

      me.findResearchResumeInfo();// 查科研建简历

      me.findXmzcyInfo();// 查找项目组成员

      me.findNr();// 查内容

      me.findJf();// 查经费

      // 查询学院
      me.getRequest("/jcXyxxb",{}).then(resp=>{
        if(resp.status == 200) {
          me.facultyData = resp.data;
        }
      });
      // 查询教师(人员)
      me.getRequest("/jcJsxxb",{}).then(resp=>{
        if(resp.status == 200){
          me.memberColumns.forEach((col)=>{
            if(col.prop === "jsbh"){
              col.options = resp.data.results;
            }
          });
        }else{
          me.$message.error("请求教师数据出错");
        }
      });
    }
  },
  data() {
    return {
      activePage: "basic",
      declarationRecord: {},
      declarationRules: {},
      teacherRecord:{},// 用来保存申请项目的教师信息
      [teaching + columnsAttr]: teachingResumeColumns, //教学简历表格列
      [teaching + dataAttr]: [], //教学简历数据
      [teaching + recordAttr]: {},
      [teaching + rulesAttr]: {},
      [teaching + dlgVisibleAttr]: false,
      [research + columnsAttr]: researchResumeColumns, //科研简历表格列
      [research + dataAttr]: [], //科研简历数据
      [research + recordAttr]: {},
      [research + rulesAttr]: {},
      [research + dlgVisibleAttr]: false,
      memberColumns:memberColumns,//项目成员表格列
      memberData:[],
      nrColumns:nrColumns,// 项目内容列
      nrData:[],
      nrRules:{
        nr:[{
          required: true,
          max: 5000, 
          message: "必填，不超过5000个字符",
          trigger: "blur"
        }]
      },
      [budget + columnsAttr]:budgetColumns,// 经费支出列
      [budget + dataAttr]:[],
      [budget + recordAttr]:{},
      [budget + rulesAttr]:{},
      [budget + dlgVisibleAttr]: false,
      nrlxData:[],
      facultyData: [],
      teachingResumeLoading:false,
      researchResumeLoading:false,
      budgetLoading:false
    };
  },
  created() {
    var me = this;

    me.init();

  }
};
</script>

<style lang="scss">
@import "@/assets/scss/basic.scss";

.declaration-form {
  height: 100%; // 2018-06-11
  margin: 0 5px;

  .header {
    background-color: $--border-level-3;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;

    .title {
      font-size: 20px;
      color: $--color-primary;
    }
  }

  .main {
    height: 100%;
    margin: 0;
    padding: 0;

    .el-tabs__header{
      margin-bottom: 0;
    }
    
    .resume-container {
      .resume-header {
        padding-top: 5px;
        border: solid 1px $--border-level-3;
      }

      .resume-main {
        margin: 0;
        padding: 0;
      }

      .edit-btn {
      }

      .delete-btn {
        color: $--origin-color-red;
      }
    }

    .budget-form{
      margin-top: 5px;
    }

    .el-form-item label{
      float: left;
    }

    @media screen and (max-height: 768px){
     .el-tabs__content{
        height: 80%;
        overflow-y: auto;
        padding:5px 0 0 0;
      } 
    }

    @media screen and (min-height:768px) and (max-height: 875px){
     .el-tabs__content{
        height: 93%;
        overflow-y: auto;
        padding:5px 0 0 0;
      } 
    }

    @media screen and (min-height:875px) and (max-height: 992px){
     .el-tabs__content{
        height: 94%;
        overflow-y: auto;
        padding:5px 0 0 0;
      } 
    }

  }
}
</style>
